<template>
  <div class="SpeciesStatistics">
    <!--    地图 B-->
    <Bmap ref='baseMap'></Bmap>
    <!--    地图 E-->

    <!--列表-->
    <div class="eli">
      <div>
        <el-date-picker style="width: 100%;" @change="trandate" v-model="pst" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <div class="speimgbox clerafix">
        <div @click="lookover">
          <div :style="allphoto ? ' border: 0.02rem solid #1FB456;' : 'border: 0.02rem solid #303133;'">
            <img style="width: 100%;height: 100%;" src="../../static/images/img/2.jpg" alt="">
          </div>
          <div>
            <span>全部&nbsp;&nbsp;&nbsp;{{ totalNum }}种</span>
          </div>
        </div>
        <div v-for=" cs in carousel" @click="singleanimal(cs)">
          <div :style="cs.color ? ' border: 0.02rem solid #1FB456;' : ' border: 0.02rem solid #303133;'">
            <img style="width: 100%;height: 100%;" :src="'/iapi' + cs.src" alt="">
          </div>
          <div>
            <span>{{ cs.name }}</span>
          </div>
        </div>
      </div>

      <!--全部-->
      <div class="all">
        <div class="tabtn">
          <el-button @click="showcharts(1)"
            :style="active == 1 ? 'background-color: #1FB456;color:#ffffff' : 'background-color: #ffffff;color:#606266'"
            v-show="allphoto" size="small" round>种类统计
          </el-button>
          <el-button @click="showcharts(2)"
            :style="active == 2 ? 'background-color: #1FB456;color:#ffffff' : 'background-color: #ffffff;color:#606266'"
            v-show="!allphoto" size="small" round>坡度海拔
          </el-button>
          <el-button @click="showcharts(3)"
            :style="active == 3 ? 'background-color: #1FB456;color:#ffffff' : 'background-color: #ffffff;color:#606266'"
            v-show="!allphoto" size="small" round>生境关系
          </el-button>
          <el-button @click="showcharts(4)"
            :style="active == 4 ? 'background-color: #1FB456;color:#ffffff' : 'background-color: #ffffff;color:#606266'"
            size="small" round>出现时间
          </el-button>
        </div>

        <div class="charts" v-show="active == 1">
          <div id="charts1"></div>
          <div id="charts2"></div>
        </div>

        <div class="charts" v-show="active == 4 && allphoto">
          <div id="charts3"></div>
          <div id="charts4"></div>
        </div>

        <div class="charts" v-show="active == 2">
          <div id="charts5"></div>
          <div id="charts6"></div>
        </div>

        <div class="charts" v-show="active == 3">
          <div id="charts7"></div>
          <div id="charts8"></div>
        </div>

        <div class="charts" v-show="active == 4 && !allphoto">
          <div id="charts9"></div>
          <div id="charts10"></div>
        </div>

      </div>
      <!--全部-->


    </div>
    <!--列表-->

    <!--图片列表-->
    <!-- <div class="photo_list">
       <div>
         <div
           @click="lookover"
           :style="allphoto?' border: 0.02rem solid #1FB456;':'border:none'"
         >
           <img src="../../static/images/img/2.jpg" alt="">
           <div>
             <span>全部&nbsp;&nbsp;&nbsp;{{totalNum}}种</span>
           </div>
         </div>
       </div>

       <div @click="previous_page">
               <span>
                 <i class="el-icon-arrow-left"></i>
               </span>
       </div>

       <div>
         <ul class="pl_box clearfix">
           <li
             v-for=" cs in carousel"
             @click="singleanimal(cs)"
           >
             <div
               :style="cs.color?' border: 0.02rem solid #1FB456;':' border: 0.02rem solid #fff;'"
             >
               <div class="streamer" style="text-align: right">
                 <span @click="lookdetail(cs)" class="el-icon-view" style="color: #1FB456"></span>&nbsp;&nbsp;
               </div>
               <img :src="cs.src+'@oosImage|100h'" alt="">

               <div>
                 {{cs.num}}张
                 &lt;!&ndash;<span&ndash;&gt;
                 &lt;!&ndash;:title="cs.text"&ndash;&gt;
                 &lt;!&ndash;style="display: inline-block;width: 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{cs.text}}&nbsp;&nbsp;&nbsp;&nbsp;&ndash;&gt;
                 &lt;!&ndash;<i&ndash;&gt;
                 &lt;!&ndash;@click.stop="look_ptoto(cs)"&ndash;&gt;
                 &lt;!&ndash;style="color: #1FB456"&ndash;&gt;
                 &lt;!&ndash;class="el-icon-view"></i>&ndash;&gt;
                 &lt;!&ndash;</span>&ndash;&gt;
               </div>

             </div>
           </li>

         </ul>
       </div>

       <div @click="next_page">
               <span>
                 <i class="el-icon-arrow-right"></i>
               </span>
       </div>

     </div>-->
    <!--图片列表-->

  </div>
</template>
<script>
import api from '../utils/api'
import http from '../utils/http'
import Bmap from './Map'

export default {
  components: {
    'Bmap': Bmap
  },
  data() {
    return {
      pst: "",
      t1: "",
      allphoto: true,
      totalNum: 0,
      ind: 0,
      carousel: [],
      areaId: "",
      timeStr: "",
      active: 1,
      photoFenLei: [],
      globalColorArray: [
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#87AD1F',
        '#71187E',
        '#3512E8',
        '#08C4F3',
        '#2C2C2C',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE',
        '#3ABDAF',
        '#7089CE',
        '#FB7A53',
        '#F6B61C',
        '#78E7E6',
        '#169196',
        '#ED462F',
        '#E4611A',
        '#D5391A',
        '#5EBD44',
        '#AA5CCE'
      ],//echarts颜色
      topTen: {
        name: [],
        value: []
      },
      dayShootTimeCount: {
        name: [],
        value: []
      },
      monthShootTimCount: {
        name: [],
        value: []
      },
      haiba: {
        name: [],
        value: []
      },
      podu: {
        name: [],
        value: []
      },
      shengjing: {
        name: [],
        value: []
      },
      shengjingdata: [],
      xiaoshengjing: [],
      xiaoshengjingname: [],
      singledayShootTimeCount: {
        name: [],
        value: []
      },
      singlemonthShootTimCount: {
        name: [],
        value: []
      },
      heatarr: []
    }
  },
  mounted() {
    let vm = this;
    setTimeout(function () {
      vm.$refs.baseMap.creationMap();
      vm.initialDate();
    }, 500)

  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
  },
  methods: {
    lookdetail(t) {
      this.$router.push({
        path: "/SpeciesStatistics/SpeciesStatisticsdetail",
        query: {
          name: t.text,
          time: this.t1
        }
      }
      )
    },
    dreawHeat() {
      this.$refs.baseMap.drawHeatMap("heat001", this.heatarr);
    },
    showcharts(n) {
      if (n == 1) {
        this.active = 1;
        this.demo1();
        this.demo2();
      }
      if (n == 4) {
        this.active = 4;
        if (this.allphoto) {
          this.demo3();
          this.demo4();
        } else {
          this.demo9();
          this.demo10();
        }

      }
      if (n == 2) {
        this.active = 2;
        this.demo5();
        this.demo6();
      }
      if (n == 3) {
        this.active = 3;
        this.demo7();
        this.demo8();
      }
    },
    //查看全部
    lookover() {
      this.allphoto = true
      this.carousel.forEach((e => {
        e.color = false
      }))
      this.$refs.baseMap.dellayer("alread_Point");
      this.dreawHeat();
      this.active = 1;
      this.demo1();
      this.demo2();
    },
    //左右箭头
    next_page() {
      if (this.ind < this.carousel.length - 3) {
        this.ind++;
        $(".pl_box").stop().animate({ left: -(this.ind * 1.5) + "rem" })
      }
    },
    previous_page() {
      if (this.ind > 0) {
        this.ind--;
        $(".pl_box").stop().animate({ left: -(this.ind * 1.5) + "rem" })
      }
    },
    //单个物种查看
    singleanimal(cs) {
      this.allphoto = false
      this.carousel.forEach((e => {
        e.color = false
      }))
      cs.color = true;
      this.$refs.baseMap.dellayer("heat001");
      var vm = this;
      (async function () {
        let res = await http.get(api.infrared.animalCount, {
          areaId: vm.areaId,
          animalName: cs.text,
          timeStr: vm.t1
        })
        var arr = [];
        res.data.fenbu.forEach((t, ind) => {
          var z = {
            id: ind + "single",
            name: "",
            borderColor: "#ffffff",
            fillColor: "#dd2c00",
            data: {},
            geojson: { coordinates: t, type: "Point" }
          }
          arr.push(z)
        })
        if (arr.length != 0) {
          vm.$refs.baseMap.previewshape(arr, "alread_Point");
        }


        vm.active = 2;

        var haibaname = [];
        var haibavalue = [];
        for (var k in res.data.haiba) {
          haibaname.push(k);
          haibavalue.push(res.data.haiba[k]);
        }
        vm.haiba.name = haibaname;
        vm.haiba.value = haibavalue;

        var poduname = [];
        var poduvalue = [];
        for (var k in res.data.podu) {
          poduname.push(k);
          poduvalue.push(res.data.podu[k]);
        }
        vm.podu.name = poduname;
        vm.podu.value = poduvalue;
        vm.demo5();
        vm.demo6();

        var shengjingname = [];
        var shengjingvalue = [];
        var shengjingdata = [];
        for (var k in res.data.shengjing) {
          var z = {
            value: res.data.shengjing[k],
            name: k
          }
          shengjingdata.push(z);
          shengjingname.push(k);
          shengjingvalue.push(res.data.shengjing[k]);
        }
        vm.shengjing.name = shengjingname;
        vm.shengjing.value = shengjingvalue;
        vm.shengjingdata = shengjingdata;

        var xiaoshengjing = [];
        var xiaoshengjingname = [];
        for (var k in res.data.xiaoshengjing) {
          var z = {
            value: res.data.xiaoshengjing[k],
            name: k
          }
          xiaoshengjing.push(z);
          xiaoshengjingname.push(k);
        }
        vm.xiaoshengjing = xiaoshengjing;
        vm.xiaoshengjingname = xiaoshengjingname;


        var dayShootTimeCountname = [];
        var dayShootTimeCountvalue = [];
        for (var k in res.data.dayShootTimeCount) {
          dayShootTimeCountname.push(k);
          dayShootTimeCountvalue.push(res.data.dayShootTimeCount[k]);
        }
        vm.singledayShootTimeCount.name = dayShootTimeCountname
        vm.singledayShootTimeCount.value = dayShootTimeCountvalue

        var monthShootTimCountname = [];
        var monthShootTimCountvalue = [];
        for (var k in res.data.monthShootTimCount) {
          monthShootTimCountname.push(k);
          monthShootTimCountvalue.push(res.data.monthShootTimCount[k]);
        }
        vm.singlemonthShootTimCount.name = monthShootTimCountname;
        vm.singlemonthShootTimCount.value = monthShootTimCountvalue;

      })()

    },
    //查看详情
    look_ptoto(cs) {
      //        var vm = this;
      //        (async function () {
      //          let res = await http.get(api.infrared.animalDetail, {
      //            animalName: cs.text,
      //            areaId: vm.areaId,
      //            timeStr: vm.timeStr
      //          })
      //          var animateDetail = res.data;
      //          sessionStorage.setItem('animateDetail', JSON.stringify(animateDetail));
      //          vm.$router.push("species_details")
      //        })()
    },
    //计算盒子大小
    calculateSize() {
      $(".pl_box").css("width", this.carousel.length * 1.5 + "rem")
    },
    //初始数据
    initialDate() {
      var vm = this;
      (async function () {
        let res = await http.get(api.infrared.totalCount, {
          //            access_token:'ecb9f885-6021-49f5-8987-9c0a4b673992',
          areaId: vm.areaId,
          timeStr: vm.t1
        })
        vm.totalNum = res.data.totalNum;
        vm.heatarr = res.data.fenbu;
        vm.dreawHeat();
        var wuzhongMap = [];
        for (var k in res.data.wuzhongMap) {
          var z = {
            src: res.data.wuzhongMap[k],
            color: false,
            text: k
          }
          for (var key in res.data.imageDetail) {
            if (z.text == key) {
              z["num"] = res.data.imageDetail[key];
              z["name"] = key
            }
          }
          wuzhongMap.push(z)
        }
        vm.carousel = wuzhongMap;
        vm.calculateSize();
        var photoFenLei = [];
        for (var k in res.data.photoFenLei) {
          var z = {
            value: res.data.photoFenLei[k],
            name: k
          }
          photoFenLei.push(z);
        }
        vm.photoFenLei = photoFenLei;
        vm.demo1();
        var topTenname = [];
        var topTenvalue = [];
        for (var k in res.data.topTen) {
          topTenname.push(k);
          topTenvalue.push(res.data.topTen[k]);
        }
        vm.topTen.name = topTenname;
        vm.topTen.value = topTenvalue;
        vm.demo2();
        var dayShootTimeCountname = [];
        var dayShootTimeCountvalue = [];
        for (var k in res.data.dayShootTimeCount) {
          dayShootTimeCountname.push(k);
          dayShootTimeCountvalue.push(res.data.dayShootTimeCount[k]);
        }
        vm.dayShootTimeCount.name = dayShootTimeCountname;
        vm.dayShootTimeCount.value = dayShootTimeCountvalue;
        var monthShootTimCountname = [];
        var monthShootTimCountvalue = [];
        for (var k in res.data.monthShootTimCount) {
          monthShootTimCountname.push(k);
          monthShootTimCountvalue.push(res.data.monthShootTimCount[k]);
        }
        vm.monthShootTimCount.name = monthShootTimCountname;
        vm.monthShootTimCount.value = monthShootTimCountvalue;
      })()
    },
    demo1() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts1'));
      var option = {
        color: this.globalColorArray,
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
          text: '各类照片比例数据统计',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        series: [
          {
            name: '物种占比',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '50%'],
            data: vm.photoFenLei,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo2() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts2'));
      var option = {
        color: ['#1FB456'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        title: {
          text: '各类物种照片数量Top10',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        //          各类物种照片数量Top10
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            show: true,
            //              textStyle: {
            //                color: '#e6e6e6',
            //              },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value'
        },
        yAxis: {
          axisLabel: {
            show: true,
            //              textStyle: {
            //                color: '#e6e6e6',
            //              }
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.topTen.name,
          axisTick: {
            alignWithLabel: true
          }

        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '60%',
            data: vm.topTen.value
          }
        ]
      }
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo3() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts3'));

      var option = {
        title: {
          text: '时段拍摄次数',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.dayShootTimeCount.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -45,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.dayShootTimeCount.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo4() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts4'));

      var option = {
        title: {
          text: '每月拍摄次数',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.monthShootTimCount.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -45,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.monthShootTimCount.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo5() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts5'));
      var option = {
        title: {
          text: '海拔拍摄情况',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.haiba.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -30,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.haiba.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo6() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts6'));
      var option = {
        title: {
          text: '坡度统计情况',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.podu.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -45,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.podu.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo7() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts7'));
      var option = {
        color: this.globalColorArray,
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 20,
          textStyle: {
            color: '#000000',
          },
          data: vm.shengjing.name
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
          text: '发现生境（月）',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        series: [
          {
            name: '生境占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: vm.shengjingdata,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo8() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts8'));
      var option = {
        color: this.globalColorArray,
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 20,
          textStyle: {
            color: '#000000',
          },
          data: vm.xiaoshengjingname
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
          text: '发现小生境（月）',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        series: [
          {
            name: '生境占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: vm.xiaoshengjing,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo9() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts9'));
      var option = {
        title: {
          text: '时段拍摄次数',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.singledayShootTimeCount.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -45,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.singledayShootTimeCount.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    demo10() {
      var vm = this;
      let myChart = this.$echarts.init(document.getElementById('charts10'));

      var option = {
        title: {
          text: '每月拍摄次数',
          left: 0,
          textStyle: {
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 14,
            fontStyle: 'normal',
            fontWeight: 'normal',
          }
        },
        xAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'category',
          data: vm.singlemonthShootTimCount.name,
          //设置字体倾斜
          axisLabel: {
            interval: 0,
            rotate: -45,//倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              //                color: '#e6e6e6',
            },
            rotate: 45,//倾斜度 -90 至 90 默认为0
          },
          axisLine: {
            lineStyle: {
              //                color: '#e6e6e6',
              width: 1,   //这里是坐标轴的宽度,可以去掉
            }
          },
          type: 'value',
          splitLine: {
            show: false,
          },
        },
        series: [{
          data: vm.singlemonthShootTimCount.value,
          type: 'line'
        }]
      };

      myChart.setOption(option);
      setTimeout(function () {
        myChart.resize();
      }, 10)
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    trandate(daterange) {
      if (this.pst != null) {
        var year = daterange[0].getFullYear();
        var month = daterange[0].getMonth() + 1;
        var date = daterange[0].getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        var t1 = year + "-" + month + "-" + date;
        var years = daterange[1].getFullYear();
        var months = daterange[1].getMonth() + 1;
        var dates = daterange[1].getDate();
        if (months >= 1 && months <= 9) {
          months = "0" + months;
        }
        if (dates >= 0 && dates <= 9) {
          dates = "0" + dates;
        }
        var t2 = years + "-" + months + "-" + dates;
        this.t1 = t1 + "~" + t2
      } else {
        this.t1 = "";
      }
      this.initialDate();
    },
  }
}
</script>
<style scoped>
@import "../../static/css/SpeciesStatistics.css";
</style>
<style>
.el-tabs__content {
  display: none;
}
</style>
